<template>

    <view style="padding-bottom: 200rpx;  background-color: #fde9dd;">
        <view class="levelBox" v-for="levelItem of Arrbylevel">
            <view class="levelItem" v-if="levelItem.list.length > 0">
                <view
                    class="levelTitle"
                    :style="{
                        color: levelItem.color,
                        backgroundImage: 'url(' + ossurl.box.detail.levelListTitle + ')'
                    }"
                >
                    {{ levelItem.title }}
                    <span class="levelProportion">{{ getLevelA(levelItem.level) }}</span>
                </view>

                <view class="levelList">
                    <view class="listBg">
                        <view class="levelListScroll">
                            <view
                                v-for="(item, index) in levelItem.list"
                                :key="index"
                                class="item"
                                :style="{
                                    backgroundImage: 'url(' + LEVEL_MAP[item.level].bg + ')'
                                }"
                                @click="showSwipe(item)"
                            >
                                <image
                                    class="super-image translateX"
                                    :src="item.spu.cover"
                                    mode="aspectFit"
                                />
                                <view class="text" style="font-size: 18rpx;text-align: left;text-indent: 10rpx;">{{levelItem.title}} {{ getLeftNum(item) }}/{{ item.quantity }}</view>
                                <view
                                    class="text Probability"
                                    :style="{
                                        color: levelItem.color,
                                        borderColor: levelItem.color
                                    }"
                                >
                                    {{ getProbability(item) }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { LEVEL_MAP } from '@/utils/config'
    import ossurl from '@/utils/ossurl'
    export default {
        props: {
            products: Array,
            poolId: Number,
            box: Object,
            levelist: Array
        },
        data() {
            return {
                LEVEL_MAP,
                ossurl
            }
        },
        computed: {
            Arrbylevel() {
                let levelA = this.products.filter((e) => {
                    return e.level == 'A'
                })

                let levelB = this.products.filter((e) => {
                    return e.level == 'B'
                })

                let levelC = this.products.filter((e) => {
                    return e.level == 'C'
                })

                let levelD = this.products.filter((e) => {
                    return e.level == 'D'
                })
                return [
                    {
                        ...LEVEL_MAP['A'],
                        level: 'A',
                        list: levelA
                    },
                    {
                        ...LEVEL_MAP['B'],
                        level: 'B',
                        list: levelB
                    },
                    {
                        ...LEVEL_MAP['C'],
                        level: 'C',
                        list: levelC
                    },
                    {
                        ...LEVEL_MAP['D'],
                        level: 'D',
                        list: levelD
                    }
                ]
            }
        },
        methods: {
            showSwipe(item) {
              console.log(item)
              let index = this.products.findIndex(e=>{
                return e.spu.id == item.spu.id
              })
                this.$router.push('award_detail_swipe', { poolId: this.poolId, index })
            },
            getLeftNum(row) {
                if (
                    !this.box ||
                    !this.box.usedStat ||
                    !this.box.usedStat[row.spu.id] ||
                    !this.box.usedStat[row.spu.id].quantity
                ) {
                    return row.quantity
                }
                return row.quantity - this.box.usedStat[row.spu.id].quantity
            },
            getProbability(row) {
                if (!this.box) return
                let leftNum = this.getLeftNum(row)
                return (
                    this.$common.ignoreRatio0(
                        ((leftNum / this.box.leftQuantity) * 100).toFixed(4)
                    ) + '%'
                )
            },
            getLevelA(level) {
                let item = this.levelist.find((e) => {
                    return e.level == level
                })
                if (item) {
                    return item.probability + '%'
                } else {
                    return '0%'
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .levelBox {
        // padding: 16rpx 20rpx;
        background-color: #fde9dd;
    }
    .levelItem {
        padding: 8rpx 20rpx;
        .levelTitle {
            font-size: 36rpx;
            // background: #fdd6b3;
            // display: inline-block;
            font-weight: bold;
            padding: 12rpx 28rpx;
            border-radius: 24rpx 24rpx 0 0;
            background-size: 100%;
            .levelProportion {
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
            }
        }
        .levelList {
            background: #fdd6b3;
            padding: 12rpx 18rpx 22rpx 18rpx;
            border-radius: 0 0 24rpx 24rpx;

            .listBg {
                overflow: hidden;
                word-break: keep-all;
                white-space: nowrap;
                background-color: #fff;
                padding-bottom: 24rpx;
                border-radius: 24rpx;
                position: relative;
                width: 100%;
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    left: 0;
                    height: 50rpx;
                    background: linear-gradient(90deg, #e5ff98 0%, #fa9d3a 100%);
                    z-index: 0;
                }
            }
            .levelListScroll {
                overflow: auto;
            }

            .item {
                width: 155rpx;
                // height: 230rpx;
                display: inline-block;
                background-position: 0 40rpx;
                background-size: 100% auto;
                background-repeat: no-repeat;
                margin-left: 10px;
                position: relative;
                // padding-bottom: 10rpx;
                .super-image {
                    width: 140rpx;
                    height: 170rpx;
                }
                .text {
                    color: #fff;
                    border-radius: 5rpx;
                    font-size: 20rpx;
                    text-align: center;
                }
                .Probability {
                    background: #ffffff;
                    border-radius: 376rpx 376rpx 376rpx 376rpx;
                    opacity: 1;
                    border: 2rpx solid #e1002e;
                    font-size: 20rpx;
                    // position: absolute;
                    display: inline-block;
                    padding: 4rpx 8rpx;
                }
            }
        }
    }
</style>
